<template>
  <div>
    <form action="/">
      <van-search
        v-model="query"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        ref="search"
      />
      <div class="mui-card">
        <ul class="mui-table-view">
          <li
            class="mui-table-view-cell mui-media"
            v-for="item in list"
            :key="item.index"
            @click="getSongPlay(item.songid)"
          >
            <p class="title">{{item.songname}}</p>
            <p class="author">{{item.artistname}}</p>
          </li>
        </ul>
      </div>
    </form>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      query: "",
      list: [],
      conlist: {}
    };
  },
  created() {
    // this.onSearch()
  },
  methods: {
    onSearch(val) {
      Toast(val);
      const search =
        this.HOST +
        "/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=" +
        this.query;
      this.$axios
        .get(search)
        .then(res => {
          this.list = res.data.song;
          console.log(this.list);
          console.log(res);
          // console.log(this.query)
          const conlist = { val: this.query };
          // var conlist = localStorage.gettItem(JSON.stringify(this.query)||'[]')
          localStorage.setItem("conlist",JSON.stringify(this.query));

          // this.list.push(conlist);
          // console.log(this.list)
        })
        .catch()
        localStorage.setItem('car',JSON.stringify(this.query)||'[]')
    },
    
    onCancel() {
      Toast("取消");
    },
    getSongPlay(songid) {
      this.$router.push({
        path: `/playsongs/${songid}`
      });
    }
  }
};
</script>
<style scoped>
.mySearch {
  margin-top: 20px;
}
.van-search__action {
  margin-bottom: 11px;
}
.title {
  color: rgb(110, 108, 108);
}
.author {
  font-size: 12px;
}
.mui-card {
    margin: 0;
}
.mui-table-view-cell{
    border-bottom: 1px solid #c8c7cc;
}
</style>